<template>
    <div class='head'>
        <div class="heda_size">本期考试</div>
        <div v-if="details">
            <div class="home_Top" v-for="(item,index) in this.$store.state.historyData">
                <div style="display: flex;">
                    <img src="../assets/examination.png" style="width:68px; height:68px; margin-right: 30px;" alt="">
                    <div >
                        <p style="font-family: PingFang SC, PingFang SC;font-weight: 400; font-size: 26px;color: #333333;line-height: 32px;"> {{item.exam.e_name}}</p>
                        <p style="font-weight: 400; font-size: 17px;color: #999999; line-height: 32px; text-align: left;"> 已完成&nbsp;&nbsp;&nbsp;&nbsp;考试时间：{{item.exam.create_time}}至 {{item.exam.e_duration}}</p>
                    </div>
                </div>
                <div style="display:flex; align-items: center;">
                    <el-button type="primary" @click="CDiteEdit(item)">查看成绩</el-button>
                    <el-button type="primary" @click="detailsClick(item)">查看详情</el-button>
                </div>
            </div>
        </div>
        <div v-else style="background-color: #F6F9FF;">
            <el-icon :size="30" @click="Put_back()"><ArrowLeft /></el-icon>
            <div v-for="(item,index) in errorData" :key="index" style="display: flex; justify-content: center;">
                <div style="width: 73%;padding: 28px; background: #FFFFFF; box-shadow: 0px 4px 6px 0px rgba(43,174,255,0.1); border-radius: 12px 12px 12px 12px; margin-top: 28px;">
                    <div style="display: flex; justify-content: flex-start; align-items: center;">
                        <div style="display:flex;">
                            <P style="color:red; font-size: 27px;font-family: fantasy; position: relative; top: -2px; right: -17px;">{{index+1}}</P>
                            <h2 style="width: 100%; font-size: 20px; padding-left: 35px; display: flex; justify-content: center;">{{ item.q_title }}</h2>
                        </div>
                    </div>
                    <div>
                        <div v-for="(val,index) in item.answers">
                            <p style="padding-left: 46px; font-size: 18px; margin:5px 5px;">{{val.a_item}}</p>
                        </div>
                    </div>
                    <div style="display: flex; margin-left: 50px;">
                        <div style="font-family: PingFang SC, PingFang SC;font-weight: 400; font-size: 17px; color: #FF3C43;">
                            <span>我的答案：</span>
                            <span v-for="(item,index) in item.wrong_answers">{{ item.a_item }}</span>
                            <span >错误</span>
                        </div>
                        <div style="font-family: PingFang SC, PingFang SC;font-weight: 400; font-size: 17px; color: #00A82E; margin-left: 50px;">
                            <span>正确答案：</span>
                            <span v-for="(item,index) in item.answers" v-show="item.a_correct == 1">{{ item.a_item }}</span>
                            <span >正确</span>
                        </div>
                    </div> 
                </div>
            </div>
            <!-- --------------------------------对题 -->
            <div v-for="(item,index) in testpaper" :key="index" style="display: flex; justify-content: center;">
                <div style="width: 73%;padding: 28px; background: #FFFFFF; box-shadow: 0px 4px 6px 0px rgba(43,174,255,0.1); border-radius: 12px 12px 12px 12px; margin-top: 28px;">
                    <div style="display: flex; justify-content: flex-start; align-items: center;">
                        <div style="display:flex;">
                            <P style="color:#00A82E; font-size: 27px;font-family: fantasy;position: relative;
                                    top: -3px;
                                    right: -17px;">{{index+1}}</P>
                            <h2 style="width: 100%; font-size: 20px; padding-left: 35px; display: flex; justify-content: center; ">{{ item.q_title }}</h2>
                        </div>
                    </div>
                    <div>
                        <div v-for="(val,index) in item.answers" :key="index">
                            <p style="padding-left: 46px; font-size: 18px; margin:5px 5px;">{{ val.a_item}}</p>
                        </div>
                    </div>
                    <div style="display: flex; margin-left: 50px;">
                        <div style="font-family: PingFang SC, PingFang SC;font-weight: 400; font-size: 17px; color: #00A82E;">
                            <span>我的答案：</span>
                            <span style="margin-left: 20px;" v-for="(val,index) in item.answers" :key="index">{{ val.a_item }}</span>
                            <span>正确</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog
            v-model="dialogVisible"
            title="成绩单"
            width="500"
        >
            <div style="background: #F7F8FA; border-radius: 12px 12px 12px 12px; padding: 23px;">
                <div style="display:flex; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 18px;">
                    <p>姓名：</p>
                    <p>{{  this.$store.state.userInfor.u_name }}</p>
                </div>
                <div style="display:flex; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 18px;">
                    <p>警号：</p>
                    <p>12345789</p>
                </div>
                <div style="display:flex; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 18px;">
                    <p>班级：</p>
                    <p>三班</p>
                </div>
                <div style="display:flex; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 18px;">
                    <p>考试时间：</p>
                    <p>{{ fraction.exam.e_start_date }}</p>
                </div>
                <div style="display:flex; font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 18px;">
                    <p>考试得分：</p>
                    <p>{{ this.fraction.re_score }}</p>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <!-- <el-button type="primary" @click="dialogVisible = false"> 关闭 </el-button> -->
                </div>
            </template>
        </el-dialog>


    </div>
</template>
<script>
export default {
   components: {},
    data() {
        return {
            details:true,
            testpaper:[],
            errorData:[],
            dialogVisible:false,
            fraction:'',
        };
   },
//监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        Put_back() {
            this.details = true
            // this.$router.go(-1)
        },
        detailsClick(val){
            if(this.details){
                this.details = true
            }else{
                this.details = false
            }
            this.get('/history/detail?re_id='+val.re_id).then(res=>{
                if(res.code == 200){
                    this.errorData = []
                    res.data.question_list.forEach((item,index) =>{
                        if(item.answers.length = 0){
                            item.answers = item.answers.filter(item => item.a_item != "C.undefined" )
                            item.answers = item.answers.filter(item => item.a_item != "D.undefined" )
                        }
                    })
                    for(let i=0; i <= 10; i++){
                        if(res.data.question_list[i].is_wrong == 1){
                            this.errorData.push(res.data.question_list[i])
                        }
                    }
                    for(let i=0; i < res.data.question_list.length; i++){
                        if(res.data.question_list[i].is_wrong == 1){
                            res.data.question_list.splice(i,1)
                        }
                    }
                    this.testpaper = res.data.question_list;
                }else{
                    this.$message({
                        message: '登陆失效',
                        type: 'error',
                    })
                    this.$route.push('/Login')
                }
            })
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.$store.dispatch('queryexamin')
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    //生命周期 - 创建之前 
    beforeCreate() {},
    //生命周期 - 挂载之前
    beforeMount() {},
    // 生命周期 - 更新之前 
    beforeUpdate() {},
    //生命周期 - 更新之后
    updated() {},
    //生命周期 - 销毁之前
    beforeDestroy() {},
    //生命周期 - 销毁完成
    destroyed() {},
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
}
</script>
<style  scoped>
.home_Top{
    display: flex; 
    justify-content: space-between; 
    border-bottom: 1px solid #DCDFE6; 
    border-radius: 0px 0px 0px 0px; 
    padding: 20px;
}
.heda_size{
    width: 100%;
    height: 142px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 34px;
    color: #2A5FD8;
    line-height: 32px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    padding: 0px 30px;
    border-bottom: 1px solid #DCDFE6;
}
.head::-webkit-scrollbar {
    width: 0;
}
.head{
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    overflow: auto;
    box-shadow: var(--el-box) !important;
}
</style>